<template>
    <div id="expmap">
        <div class="m_btn">
            <el-button type="primary" @click="back()">返回上级</el-button>
            <el-button type="primary" @click="A4=!A4">
                {{ A4?'A4': 'A3' }}
            </el-button>
        </div>
        <div :class="A4?'A4':'A3'" id="map"></div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { init, unloadMap, measure, formatPoint, aimto, loadPOLYGON, jzwPOLYGON, clearJZW, aimWKT } from '../../utils/mapjs/map';
import { useRouter } from 'vue-router';
import $mapreq from '../../api/mapreq';
const A4=ref(true);
const $router = useRouter();
function back() {
    $router.go(-1);
}
onMounted(() => {
    init();
    checkmap();
})
onUnmounted(() => {
    unloadMap();
    localStorage.removeItem('mapmsg');
    localStorage.removeItem('hztype');
    localStorage.removeItem('xqtype');
    localStorage.removeItem('isCJ');
});
const mapmsg = ref({});
const hztype = ref('');
const xqtype = ref('');

function checkmap() {
    clearJZW();
    mapmsg.value = JSON.parse(localStorage.getItem('mapmsg'));
    hztype.value = localStorage.getItem('hztype');
    xqtype.value = localStorage.getItem('xqtype');
    if(!mapmsg.value){
        return;
    }
    if (hztype.value == 'plot') {
        if (xqtype.value == 'jzw') {
            $mapreq.JZWxzcJZWlist(mapmsg.value.code).then(res => {
                if (res.code == 200) {
                    jzwPOLYGON(res.data);
                }
            });
        } else {
            $mapreq.getNextLevel(mapmsg.value.code).then(res => {
                if (res.code == 200) {
                    jzwPOLYGON(res.data);
                }
            });
        }
        setTimeout(() => {
            loadPOLYGON(mapmsg.value.name, mapmsg.value.geom);
        }, 500)
    } else {
        let iscj = localStorage.getItem('isCJ');
        if (iscj == 'true') {
            $mapreq.CJWgetJZWList(mapmsg.value.code).then(res => {
                if (res.code == 200) {
                    jzwPOLYGON(res.data);
                }
            });

        } else if (xqtype.value == 'jzw') {
            $mapreq.XZgetJZWList(mapmsg.value.code).then(res => {
                if (res.code == 200) {
                    jzwPOLYGON(res.data);
                }
            });
            // loadPOLYGON(e.name, e.geom);
        } else {
            $mapreq.getNextLevel(mapmsg.value.code).then(res => {
                if (res.code == 200) {
                    jzwPOLYGON(res.data);
                }
            });
        }


    }
    aimWKT(mapmsg.value.geom);
}
</script>

<style scoped></style>

<style lang='less'>
#expmap {
    .m_btn {
        position: fixed;
        left: 10px;
        top: 10px;
        z-index: 999;
    }

    #map {
        width: 100%;
        position: absolute;
        height: 100%;
        background-color: rgb(20, 34, 51);

        .ol-overlaycontainer-stopevent {
            display: none;
        }

        .ol-zoom-out {
            display: none;
        }

        .ol-zoom-in {
            display: none;
        }
    }
    .A4{
        width: 1122px !important;
        height: 793px !important;
    }
    .A3{
        width: 2244px !important;
        height: 1586 !important;
    }
}
</style>